<template>
  <TopNavBar :title="_t18('23_title')" type="back" />

  <div class="withdraw-apply-container">
    <!-- Tabs -->
    <div class="withdraw-tabs">
      <div :class="['tab', activeTab === 0 ? 'active' : '']" @click="activeTab = 0">
        {{ _t18('23_tab_crypto') }}
      </div>
      <div :class="['tab', activeTab === 1 ? 'active' : '']" @click="activeTab = 1">
        {{ _t18('23_tab_fiat') }}
      </div>
    </div>

    <!-- ================= 加密货币提现 ================= -->
    <div v-if="activeTab === 0" class="tab-content">
      <!-- 網路 -->
      <div class="form-item">
        <label class="form-label">{{ _t18('23_network') }}</label>
        <div class="form-value select-value network-select-trigger" @click="openNetworkSelect">
          {{ selectedNetwork }}
          <svg class="suffix-icon" width="12" height="12" viewBox="0 0 24 24">
            <path d="M8 5l8 7-8 7Z" fill="#999" />
          </svg>
        </div>
      </div>

      <!-- 幣種 -->
      <div class="form-item">
        <label class="form-label">{{ _t18('23_coin') }}</label>
        <div class="form-value coin-value coin-select-trigger" @click="openCoinSelect">
          <img :src="coinOptions.find(c => c.value === selectedCoin)?.icon" class="coin-icon" alt="coin" />
          {{ selectedCoin }}
          <svg class="suffix-icon" width="12" height="12" viewBox="0 0 24 24">
            <path d="M8 5l8 7-8 7Z" fill="#999" />
          </svg>
        </div>
      </div>

      <div class="form-item">
        <label class="form-label">{{ _t18('23_address') }}</label>
        <input class="form-input" v-model="address" :placeholder="_t18('23_input_wallet')" />
      </div>
      <div class="form-item">
        <label class="form-label">{{ _t18('23_amount') }}</label>
        <div class="input-group">
          <input class="form-input" v-model="amount" :placeholder="_t18('23_input_amount')" type="number" />
          <button class="all-btn" @click="setAll">{{ _t18('23_all') }}</button>
        </div>
      </div>
      <div class="form-item">
        <label class="form-label">{{ _t18('23_pwd') }}</label>
        <input class="form-input" v-model="password" type="number" :placeholder="_t18('23_input_pwd')" />
      </div>
      <div class="info-row">
        <span>{{ _t18('23_fee') }}：{{ withdrawType?.ratio }}%</span>
        <span style="margin-left:auto;">{{ _t18('23_balance') }}：{{ allAmount }}</span>
      </div>
      <div class="info-row">
        <span>{{ _t18('23_real') }}：{{ Number(amount) - Number(amount * withdrawType?.ratio) }}</span>
      </div>
      <div class="submit-btn-section">
        <button class="submit-btn" @click="submit">{{ _t18('23_submit') }}</button>
      </div>
    </div>

    <!-- ================= 法币提现 ================= -->
    <div v-if="activeTab === 1" class="tab-content">
      <div class="fiat-balance-row">
        <span class="fiat-currency">USD</span>
        <span class="fiat-balance">{{ _t18('23_available') }}：{{ allAmount }}</span>
      </div>

      <div v-if="bankList.length > 0" class="bank-card-box" @click="handleBankCardClick">
        <div class="bank-card-left">
          <div class="bank-card-icon"></div>
          <div class="bank-card-info">
            <div class="bank-card-name">{{ curBank.bankName }}</div>
            <div class="bank-card-number">{{ hideBank(curBank.cardNumber) }}</div>
          </div>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24">
          <path d="M8 5l8 7-8 7" stroke="#aaa" stroke-width="2" fill="none" />
        </svg>
      </div>

      <div v-else class="add-bank-text" @click="router.push('/bind-card')">
        + {{ _t18('23_add_bank') }}
      </div>

      <div class="form-item">
        <label class="form-label">{{ _t18('23_withdraw_amount') }} USD</label>
        <div class="input-group">
          <input class="form-input" v-model="amount" :placeholder="_t18('23_input_withdraw')" type="number" />
          <button class="all-btn" @click="setAll">{{ _t18('23_all') }}</button>
        </div>
      </div>

      <div class="form-item">
        <label class="form-label">{{ _t18('23_pwd') }}</label>
        <input class="form-input" v-model="password" type="number" :placeholder="_t18('23_input_pwd')" />
      </div>

      <div class="info-row">
        <span>{{ _t18('23_fee') }}：{{ withdrawType?.ratio }}%</span>
      </div>
      <div class="info-row">
        <span>{{ _t18('23_real') }}：{{ Number(amount) - Number(amount * withdrawType?.ratio) }}</span>
      </div>

      <div class="submit-btn-section">
        <button class="submit-btn" @click="submit">{{ _t18('23_submit') }}</button>
      </div>

      <!-- 银行卡选择弹窗 -->
      <van-action-sheet
        v-model:show="showSheet"
        :title="_t18('23_select_bank')"
        :cancel-text="_t18('23_add_bank')"
        @cancel="goBindCard"
      >
        <div class="sheet-list">
          <div
            v-for="item in bankList"
            :key="item.cardNumber"
            class="sheet-item"
            @click="selectSheet(item)"
          >
            <div class="sheet-bank-icon"></div>
            <div class="sheet-bank-info">
              <div class="sheet-bank-name">{{ item.bankName }}</div>
              <div class="sheet-card">{{ hideBank(item.cardNumber) }}</div>
            </div>
          </div>
        </div>
      </van-action-sheet>
    </div>

    <!-- 网络选择弹窗 -->
    <transition name="fade">
      <div v-if="showNetworkSelect" class="network-select-modal">
        <div class="network-select-mask" @click="closeNetworkSelect"></div>
        <transition name="slide-up-bottom">
          <div v-if="showNetworkSelect" class="network-select-popup-bottom">
            <div class="network-select-header">
              <span>{{ _t18('23_select') }}</span>
              <svg class="close-btn" @click="closeNetworkSelect" width="24" height="24" viewBox="0 0 24 24">
                <path d="M6 6l12 12M6 18L18 6" stroke="#888" stroke-width="2" stroke-linecap="round" />
              </svg>
            </div>
            <div class="network-select-list">
              <div v-for="item in networkOptions" :key="item.value" class="network-select-item" @click="selectNetwork(item.value)">
                <span>{{ item.label }}</span>
                <img :src="selectedNetwork === item.value ? currentIcon : noCuttemdIcon" class="network-check-icon" />
              </div>
            </div>
          </div>
        </transition>
      </div>
    </transition>

    <!-- 币种选择弹窗 -->
    <transition name="fade">
      <div v-if="showCoinSelect" class="network-select-modal">
        <div class="network-select-mask" @click="closeCoinSelect"></div>
        <transition name="slide-up-bottom">
          <div v-if="showCoinSelect" class="network-select-popup-bottom">
            <div class="network-select-header">
              <span>{{ _t18('23_select') }}</span>
              <svg class="close-btn" @click="closeCoinSelect" width="24" height="24" viewBox="0 0 24 24">
                <path d="M6 6l12 12M6 18L18 6" stroke="#888" stroke-width="2" stroke-linecap="round" />
              </svg>
            </div>
            <div class="network-select-list">
              <div v-for="item in coinOptions" :key="item.value" class="network-select-item" @click="selectCoin(item.value)">
                <div style="display:flex;align-items:center;gap:10px;">
                  <img :src="item.icon" class="coin-icon" alt="coin" />
                  <span>{{ item.label }}</span>
                </div>
                <img :src="selectedCoin === item.value ? currentIcon : noCuttemdIcon" class="network-check-icon" />
              </div>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { DIFF_ISFREEZE, DIFF_WITHDRAW } from '@/config/index'
import { useFreeze } from '@/hook/useFreeze'
import { computed, ref } from 'vue'
import currentIcon from '@/assets/defi/current.png'
import noCuttemdIcon from '@/assets/defi/noCuttemd.png'
import { useMainStore } from '@/store/index.js'
import { useToast } from '@/hook/useToast'
import { _t18 } from '@/utils/public'
import { useUserStore } from '@/store/user/index'
import { showToast } from 'vant'
import {
  getBindCardList,
  getCacheStatus,
  saveCacheAddress,
  withdrawSubmit
} from '@/api/account.js'
import { useRoute, useRouter } from 'vue-router'
import { filterCoin2 } from '@/utils/public'
import { priceFormat } from '@/utils/decimal.js'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const route = useRoute()
const router = useRouter()
const { _isFreeze } = useFreeze()
const mainStore = useMainStore()
const { _toast } = useToast()
const userStore = useUserStore()
userStore.getUserInfo()

// 用户信息
const { userInfo } = storeToRefs(userStore)
// 用户余额信息
const { asset } = storeToRefs(userStore)

// ---------------------- tab切换 ----------------------
const activeTab = ref(0)

// ---------------------- 网络选择 ----------------------
const networkOptions = ref([
  { label: 'TRC20', value: 'USDT-TRC' },
  { label: 'ERC20', value: 'USDT-ERC' },
])
const selectedNetwork = ref(networkOptions.value[1].value)
const showNetworkSelect = ref(false)
function openNetworkSelect() {
  showNetworkSelect.value = true
}
function closeNetworkSelect() {
  showNetworkSelect.value = false
}
function selectNetwork(val) {
  selectedNetwork.value = val
  closeNetworkSelect()
}


const goBindCard = () => {
  showSheet.value = false
  router.push('/bind-card')
}

// ---------------------- 币种选择 ----------------------
const coinOptions = [
  {
    label: 'USDT',
    value: 'usdt',
    icon: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/1e8deac3f3e547629a8bf2b466dc0359.png'
  },
  {
    label: 'ETH',
    value: 'eth',
    icon: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/ede2393ae55247b686b96c38231d4676.png'
  },
  {
    label: 'USDC',
    value: 'usdc',
    icon: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/LOGOIPSUM/c0830db57f39487aa4a1205ff23c1633.png'
  },
  {
    label: 'BTC',
    value: 'btc',
    icon: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png'
  },
  {
    label: 'BASE',
    value: 'base',
    icon: 'https://static-assets.coinbase.com/ui-infra/illustration/v1/pictogram/svg/light/coinbaseLogoNavigation-4.svg'
  }
]
const selectedCoin = ref(coinOptions[0].value)
const showCoinSelect = ref(false)
function openCoinSelect() {
  showCoinSelect.value = true
}
function closeCoinSelect() {
  showCoinSelect.value = false
}
function selectCoin(val) {
  selectedCoin.value = val
  networkOptions.value = []
  if (selectedCoin.value == 'usdt') {
    networkOptions.value = [
      { label: 'TRC20', value: 'USDT-TRC' },
      { label: 'ERC20', value: 'USDT-ERC' }
    ]
	}else if (selectedCoin.value == 'base') {
	    networkOptions.value = [
	      { label: 'USDT', value: 'BASE-USDT' },
	      { label: 'ETH', value: 'BASE-ETH' },
	      { label: 'USDC', value: 'BASE-USDC' }
	    ]
  } else {
    networkOptions.value = [{ label: val.toUpperCase(), value: val.toUpperCase() }]
  }
  selectedNetwork.value = networkOptions.value[0].value
  closeCoinSelect()
}

// ---------------------- 输入框与计算 ----------------------
const address = ref('')
const amount = ref('')
const password = ref('')

// 查询余额
const allAmount = computed(() => {
  let data = 0
  const index = activeTab.value == 1 && asset.value.findIndex(item => filterCoin2(item.symbol) == curBank.value.coin?.toLowerCase())

  for (let i = 0; i < asset.value.length; i++) {
    if (activeTab.value == 1) {
      if (
        asset.value[i].type == 1 &&
        filterCoin2(asset.value[i].symbol) ==
          (index != -1 ? curBank.value.coin?.toLowerCase() : 'usdt')
      ) {
        data = asset.value[i].availableAmount
        selectedCoin.value = index != -1 ? curBank.value.coin : 'usdt'
      }
    } else {
      if (asset.value[i].type == 1 && filterCoin2(asset.value[i].symbol) == selectedCoin.value) {
        data = asset.value[i].availableAmount
      }
    }
  }
  return data
})

// 提现类型计算
const withdrawType = computed(() => {
  let data = {}
  if (activeTab.value == 1) {
    data = mainStore.getWithdrawList.find(
      item => item.rechargeType == 'jpy' && item.rechargeName == 'BANK'
    )
  } else {
    data = mainStore.getWithdrawList.find(
      item => item.rechargeType == selectedCoin.value && item.rechargeName == selectedNetwork.value
    )
  }
  return data
})

// 全部金额
function setAll() {
  amount.value = allAmount.value
}

// ---------------------- 提交提现 ----------------------
const submitForm = () => {
  userStore.getUserInfo()
  let flag = true

  // ✅ 新增：禁止 userType=1 提交
  if (userInfo.value?.user?.userType === 1 || userInfo.value?.user?.userType === '1') {
    _toast('您当前账户类型禁止提现')
    return
  }
  
  // ✅ 新增：检查邮箱是否绑定
if (!userInfo.value?.user?.email) {
  let countdown = 5
  const timer = setInterval(() => {
    if (countdown > 0) {
      _toast(`${t('please_bind_email')}（${countdown}s）`)
      countdown--
    } else {
      clearInterval(timer)
      router.push('/email-authentication')
    }
  }, 1000)
  return
}

  if (amount.value == '' || amount.value > allAmount.value || amount.value <= 0) {
    _toast('withdraw_please_num')
    return
  }
  if (activeTab.value == 0 && address.value == '') {
    _toast('withdraw_please_address')
    return
  }
  if (password.value == '') {
    _toast('withdraw_please_pwd')
    return
  }
  if (userInfo.value.detail?.userTardPwd == null) {
    flag = false
    _toast('withdraw_please_fundPwd')
    setTimeout(() => {
      router.push('/fund-password')
    }, 800)
    return
  }

  let params = ''
  if (activeTab.value == 1) {
    params = `amount=${priceFormat(amount.value)}&coinType=BANK&pwd=${password.value}&adress=${curBank.value.cardNumber}&coin=usdt&bankName=${curBank.value.bankName}&bankUserName=${curBank.value.userName}&bankBranch=${curBank.value.bankBranch}`
  } else {
    params = `amount=${priceFormat(amount.value)}&coinType=${selectedNetwork.value}&pwd=${password.value}&adress=${address.value}&coin=${selectedCoin.value}`
  }

  if (flag) {
    if (DIFF_WITHDRAW.includes(__config._APP_ENV)) {
      getCacheStatus().then(res => {
        if (!res.data) {
          setAddress(params)
        } else {
          _toast('last_order_info')
        }
      })
    } else {
      submitApi(params)
    }
  }
}


const setAddress = params => {
  let data = { coin: selectedNetwork.value, address: address.value }
  saveCacheAddress(data).then(res => {
    if (res.code == '200') submitApi(params)
  })
}

const submitApi = params => {
  withdrawSubmit(params).then(res => {
    if (res.code == '200') {
      _toast('withdraw_success')
      setTimeout(() => {
        router.push('finance-record')
      }, 500)
    } else {
      showToast(res.msg)
    }
  })
}

const submit = () => {
  submitForm()
}

// ---------------------- 银行卡数据 ----------------------
const curBank = ref({})
const showSheet = ref(false)
const selectSheet = item => {
  showSheet.value = false
  curBank.value = item
}

// ✅ 如果当前显示的是“請添加銀行卡”，点击跳转绑卡页
const handleBankCardClick = () => {
  if (!curBank.value.cardNumber) {
    router.push('/bind-card')
  } else {
    showSheet.value = true
  }
}

const hideBank = item => {
  if (!item) return ''
  const str1 = item.substring(0, 4)
  const str2 = item.substring(item.length - 4)
  return `${str1} **** **** ${str2}`
}

const bankList = ref([])
const getCardList = async () => {
  const res = await getBindCardList()
  if (res.code == '200') {
    if (res.data.length > 0) {
      bankList.value = res.data
      curBank.value = bankList.value[0]
    } else {
      // ✅ 没有银行卡：显示提示，不跳转
      bankList.value = []
      curBank.value = { bankName: '請添加銀行卡', cardNumber: '' }
    }
  }
}
getCardList()
</script>

<style scoped>
.withdraw-apply-container {
  background: #f5f7fa;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

/* ================= Tabs ================= */
.withdraw-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0 18px 16px;
}
.tab {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  padding: 7px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.tab.active {
  background: #000;
  color: #fff;
}

/* ================= 通用表单 ================= */
.tab-content {
  padding: 0 16px;
}
.form-item {
  margin-bottom: 18px;
}
.form-label {
  font-size: 14px;
  color: #222;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.form-input {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 18px;
  font-size: 14px;
  color: #222;
  outline: none;
  box-sizing: border-box;
}
.input-group {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 24px;
}
.all-btn {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 18px;
  margin-right: 10px;
  margin-left: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.all-btn:active {
  background: #333;
}

/* ================= 信息行 ================= */
.info-row {
  display: flex;
  font-size: 13px;
  color: #222;
  margin-bottom: 6px;
  align-items: center;
}

/* ================= 提交按钮 ================= */
.submit-btn-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0 24px;
  background: #f5f7fa;
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.submit-btn {
  width: 90%;
  height: 48px;
  background: #000;
  color: #fff;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 400;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.submit-btn:active {
  background: #333;
}

/* ================= 网络/币种选择弹窗 ================= */
.network-select-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
}
.network-select-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.08);
  z-index: 1;
}
.network-select-popup-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #f5f7fa;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.08);
  z-index: 2;
  padding-bottom: 18px;
  padding-top: 8px;
}
.network-select-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  padding: 18px 0 10px 0;
  position: relative;
}
.network-select-header .close-btn {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.network-select-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.network-select-item {
  background: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: #222;
  padding: 14px 24px;
  margin: 0 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.network-select-item:active {
  background: #f0f0f0;
}
.network-check-icon {
  width: 20px;
  height: 20px;
}

/* ================= 动画 ================= */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.25s cubic-bezier(.4,0,.2,1);
}
.fade-enter-from, .fade-leave-to { opacity: 0; }
.fade-enter-to, .fade-leave-from { opacity: 1; }
.slide-up-bottom-enter-active, .slide-up-bottom-leave-active {
  transition: transform 0.28s, opacity 0.28s;
}
.slide-up-bottom-enter-from, .slide-up-bottom-leave-to {
  transform: translateY(100%);
  opacity: 0;
}
.slide-up-bottom-enter-to, .slide-up-bottom-leave-from {
  transform: translateY(0);
  opacity: 1;
}

/* ================= 法币提现 ================= */
.fiat-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 24px;
  padding: 16px 22px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
}
.fiat-currency {
  color: #222;
}
.fiat-balance {
  color: #222;
  font-size: 14px;
  font-weight: 400;
}

/* 银行卡展示卡片 */
.bank-card-box {
  background: #fff;
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 18px;
  cursor: pointer;
}
.bank-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bank-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2a7af6 url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18" stroke="white" stroke-width="2"/></svg>') no-repeat center/18px;
}
.bank-card-info {
  display: flex;
  flex-direction: column;
}
.bank-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  margin-bottom: 6px;
}
.bank-card-number {
  font-size: 14px;
  color: #555;
  letter-spacing: 1px;
}

/* 银行卡选择弹窗 */
.sheet-list {
  background: #fff;
  padding: 20px 16px 30px;
}
.sheet-item {
  display: flex;
  align-items: center;
  background: #f9fafb;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.sheet-item:active {
  background: #eef1f4;
}
.sheet-bank-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2a7af6 url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18" stroke="white" stroke-width="2"/></svg>') no-repeat center/18px;
  margin-right: 14px;
}
.sheet-bank-info {
  display: flex;
  flex-direction: column;
}
.sheet-bank-name {
  font-size: 15px;
  color: #000;
  font-weight: 600;
  margin-bottom: 6px;
}
.sheet-card {
  font-size: 14px;
  color: #555;
  letter-spacing: 1px;
}
.van-action-sheet__header {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.van-action-sheet__cancel {
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

/* 层级修复 */
.van-action-sheet { z-index: 1000 !important; }
.network-select-modal { z-index: 3000 !important; }
.network-select-trigger { position: relative; z-index: 2100; }
.network-select-trigger,
.coin-select-trigger {
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto !important;
}
.van-overlay {
  pointer-events: none !important;
  background: transparent !important;
}
.withdraw-apply-container .tab-content:nth-child(3) .van-overlay {
  pointer-events: auto !important;
}
.network-select-modal {
  z-index: 10000 !important;
}
.van-action-sheet {
  z-index: 800 !important;
}
.select-value,
.coin-value {
  background: #fff;
  border-radius: 24px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  color: #222;
  cursor: pointer;
}
.coin-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}
.suffix-icon {
  width: 16px;
  height: 16px;
  margin-left: auto;
  margin-right: 4px;
}
.add-bank-text {
  background: linear-gradient(90deg, #000, #333);
  color: #fff;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin: 20px auto;
  width: 90%;
  cursor: pointer;
  transition: all 0.25s;
}
.add-bank-text:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

</style>
